<!doctype html>
<html class="no-js" lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>商品详情页面</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/product-style.css">
  <meta name="description" content="商品详情页面">

  <link rel="preload" href="img/ikun.jpg" as="image">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>
<div class="AllDiv">
  <header class="TopNavigation">
    <div id="toplogo">XianCai</div>
  </header>

  <div class="BodyContentSurface">
    <div class="BodyContent">
      <aside class="LeftNavigationSurface">
        <nav>
          <div class="left1">
            <!--          LeftNavigationSurface-->
            <a href="index.html"><div class="left-bq">首页</div></a>
          </div>
          <div class="left">
            <!--          LeftNavigationSurface-->
            <a href="information.html"><div class="left-bq">消息</div></a>
          </div>
          <div class="left">
            <!--          LeftNavigationSurface-->
            <a href="index3.html"><div class="left-bq">个人</div></a>
          </div>
        </nav>
      </aside>

      <main class="RightContentSurface">
        <div class="RightContent">
          <div class="content">
            <article class="product-details-container">
              <div class="product-gallery">
                <div class="main-image-wrapper">
                  <img id="main-product-image" src="img/ikun.jpg" alt="高性能无线机械键盘">
                  <button class="gallery-nav prev" id="gallery-prev">&#10094;</button>
                  <button class="gallery-nav next" id="gallery-next">&#10095;</button>
                </div>
                <div class="thumbnail-list">
                  <img class="thumbnail-item active" src="img/ikun.jpg"  data-index="0">
                  <img class="thumbnail-item" src="img/ikun-side.png"  data-index="1">
                  <img class="thumbnail-item" src="img/ikun-back.png" data-index="2">
                </div>
              </div>

              <h1>高性能无线机械键盘</h1>
              <div class="product-price">价格: ¥ 799.00</div>
              <div class="product-stock">库存: 128 件</div>
              <p>这是一款专为游戏玩家和程序员设计的高性能无线机械键盘。采用樱桃MX红轴，支持三模连接（有线、蓝牙5.1、2.4G无线），并配备RGB背光和全键无冲设计，为你带来极致的输入体验。</p>

              <div class="product-actions-container">
                <div class="buy-chat-group">
                  <button class="action-btn btn-chat">聊一聊</button>
                  <button class="action-btn btn-buy">购买</button>
                </div>
                <button class="action-btn btn-favorite" id="favorite-btn">收藏</button>
              </div>
            </article>

            <section id="recommendations-container">
              <h2>为你推荐</h2>
              <div class="recommendations-wrapper">
                <button class="scroll-btn prev" id="scroll-prev">&#10094;</button>
                <div class="recommendations-list-wrapper">
                  <div class="recommendations-list">
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="人体工学鼠标" loading="lazy">
                      <p>人体工学鼠标</p>
                    </div>
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="4K超清显示器" loading="lazy">
                      <p>4K超清显示器</p>
                    </div>
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="降噪蓝牙耳机" loading="lazy">
                      <p>降噪蓝牙耳机</p>
                    </div>
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="高清网络摄像头" loading="lazy">
                      <p>高清网络摄像头</p>
                    </div>
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="机械键盘键帽" loading="lazy">
                      <p>机械键盘键帽</p>
                    </div>
                    <div class="recommendation-item">
                      <img src="img/ikun.jpg" alt="大尺寸鼠标垫" loading="lazy">
                      <p>大尺寸鼠标垫</p>
                    </div>
                  </div>
                </div>
                <button class="scroll-btn next" id="scroll-next">&#10095;</button>
              </div>
            </section>
          </div>
        </div>
      </main>
    </div>
  </div>
</div>

<script>
  // 修改：将事件监听器从 'DOMContentLoaded' 改为 'load'
  window.addEventListener('load', function() {
    // --- 商品图片画廊逻辑 ---
    const imageSources = [
      'img/ikun.jpg',
      'img/ikun-side.png',
      'img/ikun-back.png'
    ];
    let currentImageIndex = 0;

    const mainImage = document.getElementById('main-product-image');
    const prevBtn = document.getElementById('gallery-prev');
    const nextBtn = document.getElementById('gallery-next');
    const thumbnails = document.querySelectorAll('.thumbnail-item');

    function updateGallery(index) {
      mainImage.style.opacity = '0';
      setTimeout(() => {
        mainImage.src = imageSources[index];
        mainImage.style.opacity = '1';
      }, 200);

      thumbnails.forEach(thumb => thumb.classList.remove('active'));
      thumbnails[index].classList.add('active');

      currentImageIndex = index;
    }

    prevBtn.addEventListener('click', () => {
      let newIndex = (currentImageIndex - 1 + imageSources.length) % imageSources.length;
      updateGallery(newIndex);
    });

    nextBtn.addEventListener('click', () => {
      let newIndex = (currentImageIndex + 1) % imageSources.length;
      updateGallery(newIndex);
    });

    thumbnails.forEach(thumb => {
      thumb.addEventListener('click', () => {
        const index = parseInt(thumb.getAttribute('data-index'));
        updateGallery(index);
      });
    });

    // --- 收藏按钮逻辑 ---
    const favoriteBtn = document.getElementById('favorite-btn');
    favoriteBtn.addEventListener('click', () => {
      favoriteBtn.classList.toggle('is-favorite');
      if (favoriteBtn.classList.contains('is-favorite')) {
        favoriteBtn.textContent = '已收藏';
      } else {
        favoriteBtn.textContent = '收藏';
      }
    });

    // --- 推荐商品滚动逻辑 ---
    const scrollPrevBtn = document.getElementById('scroll-prev');
    const scrollNextBtn = document.getElementById('scroll-next');
    const recommendationsWrapper = document.querySelector('.recommendations-list-wrapper');

    const scrollAmount = 150 + 20;

    scrollPrevBtn.addEventListener('click', () => {
      recommendationsWrapper.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
    });

    scrollNextBtn.addEventListener('click', () => {
      recommendationsWrapper.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    });
  });
</script>

</body>
</html>
